*{
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  outline: none;
  box-sizing: border-box;
}
// body{
// 	height: 100vh;
// 	position: relative;
// }
@function px($px){
  @return ($px/3)+px;
}
.jd-wrap{
  width: 100vw;
  padding-bottom: px(150);
  .jd-header{
    height: px(90);
    line-height: px(90);
    margin: px(30) 0 px(52);
    padding: 0 px(62) 0 px(44);
    //background-color: pink;
    font-size: px(42);
    display: flex;
    .jd-header__classify{
      width: 10%;
      font-weight: bold;
      color: #999;
    }
    .jd-header__input{
      width: 80%;
      font-size: px(44);
      position: relative;
      .jd-header__fontItem{
        position: absolute;
        color: #999;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

      }
      .fa-search{
        left: px(30);
      }
      input{
        height: px(90);
        //line-height: px(90);
        width: 100%;
        border: 0;
        border-radius: px(44);
        transform: translateY(-2px);
        padding:  0 px(30) 0 px(104);
        background-color: #f7f7f7;
        color: #bebec0;
      }
      .fa-qrcode{
        right: px(30);
      }
    }
    .jd-header__more{
      width: 10%;
      text-align: right;
      .fa-plus{
        color: #ec5e56;
        font-size: px(46);
      }
    }
  }

  .jd-tab{
    width: 100%;
    height: auto;
    font-size: px(48);
    font-weight: bold;
    text-align: center;
    margin-bottom: px(38);
    span{
      color: #333333;
      padding-bottom: px(26);
      border-bottom: px(12) transparent;
      &.active{
        color: #de554f;
        border-bottom: px(12) solid #de554f;
      }
    }
    .jd-tab__recommend{
      margin-right: px(354);
    }
    .jd-tab__follow{

    }
  }

  .jd-banner{
    position: relative;
    background-color: pink;
    .jd-banner__imgWrap{
      height: px(508);
    }
    .jd-banner__point{
      position: absolute;
      //border: 1px solid red;
      right: px(43);
      bottom: px(42);
      display: flex;
      list-style: none;
      li{
        height: px(14);
        width: px(14);
        background-color: #eee;
        margin: 0 px(11);
        border-radius: 50%;
        &.active{
          background-color: #ccc;
        }
      }
    }
  }

  .jd-nav{
    width: 100%;
    height: px(526);
    padding: 0 px(84);
    .jd-nav__content{
      width: 100%;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li{
        //border: 1px solid red;
        height: px(526/2);
        width: 20%;
        padding-top: px(66);
        text-align: center;
        i{
          font-size: px(96);
          color: #de554f;
          margin-bottom: px(32);
        }
        p{
          color: #444;
          font-size: px(36);
        }
      }
    }
  }
  hr{
    height: px(30);
    background-color: #eee;
    border: 0;
  }

  .jd-activity{
    width: 100%;
    .jd-activity__item{
      //border-top: px(30) solid #eee;
      height: px(436);
      padding: px(44) px(28);
      .jd-activity__itemInfo{
        width: 100%;
        height: 100%;
        .jd-activity__poster{
          width: px(346);
          height: 100%;
          background-color: pink;
          float: left;
          border-radius: 3px;
          overflow: hidden;
        }
        .jd-activity__introduce{
          padding-left: px(374);
          .jd-activity__title{
            position: relative;
            font-size: px(48);
            color: #333;
            line-height: px(77);
            .fa-times{
              font-size: px(24);
              position: absolute;
              top: px(10);
              right: 0;
              color: #ccc;
            }
          }
          .jd-activity__ranking{
            span{
              font-size: px(36);
              padding: px(6) px(12);
              background-color: #f7f7f7;
              color: #999999;
              border-radius: 2px;
            }
          }
          .jd-activity__subTitle{
            font-size: px(48);
            margin-top: px(26);
            color: #d33d34;
          }
          .jd-activity__comment{
            font-size: px(36);
            color: #888;
            .f_right{
              float: right;
            }
            span:nth-child(2){
              margin-right: px(28);
            }
            span:last-child{
              margin-right: px(60);
            }
          }
        }
      }
    }
  }

  .jd-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    background-color: #fff;
    z-index: 9;
    .jd-navBar{
      height: px(150);
      padding: px(24) px(28) 0 px(28);
      display: flex;
      justify-content: space-between;
      list-style: none;
      li{
        text-align: center;
        flex: 1;
        i{
          font-size: px(60);
          color: #ccc;
        }
        p{
          color: #999999;
          font-size: px(32);
          padding-top: px(8);
        }
        &.active{
          i{
            color: #e0665a;
          }
          p{
            color: #de554f;
          }
        }
      }
    }
  }
}